<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Helpful Bootstrap Tools and Resources</title>
    <link meta="description" content="A collection of the most useful Bootstrap 4 resources">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ThemesGuide">
    <meta name="twitter:creator" content="@ThemesGuide">
    <meta name="twitter:title" content="Bootstrap Tools and Resources">
    <meta name="twitter:description" content="Learn how to use Bootstrap 4">
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-103606808-1', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="https://www.codeply.com/js/embed.js"></script>
  </head>
  <body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
    <nav class="navbar navbar-custom navbar-dark fixed-top navbar-expand-md" role="navigation">
    <div class="container">
        <a class="navbar-text page-scroll font-weight-bold text-uppercase py-3" href="http://themes.guide">
        <span>Themes.guide</span>
        </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-md-auto">
                <li class="nav-item"><a class="page-scroll active nav-link pr-3" href="./">Bootstrap 4</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" target="_ext" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" title="Bootstrap 4 themes collection" href="http://themes.guide/#freebies">Free Themes</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-0" href="http://themes.guide/#themes">Pro Themes</a></li>
            </ul>
        </div>
    </div>
</nav> 
    <div class="container pt-5">
        <div class="row mt-5">
            <div class="col-md-12">
                                <h4>
                    <a href="how-to.html">
                    <img src="./assets/howto/bootstrap-punchout.svg" alt="How to Bootstrap 4" class="bg-primary border rounded border-primary mr-2 mb-1" style="width:30px;height:30px">
                    How to... Bootstrap</a>
                </h4>
            </div>
            <div class="col-md-12 pt-5 text-center">
                <h1 class="font-weight-light">Helpful Bootstrap Tools &amp; Resources</h1>
            </div>
        </div>
    </div>
    
    <section id="howto">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-10 mx-auto">
                    
                    <h3 class="mb-5">
                    Here are the Bootstrap tools mentioned in the article. You’ll want to bookmark this list of must-have Bootstrap resources.
                    </h3>

                    <h5>
                    <a href="http://getbootstrap.com" target="_new" rel="nofollow">Official Bootstrap Documentation</a>
                    </h5>
                    
                    <h5>
                    <a href="https://www.codeply.com/go/p/bootstrap_4.1.3" target="_new" rel="nofollow">Codeply Bootstrap 4</a>
                    </h5>
                    
                    <h5>
                    <a href="https://www.bootstrapcdn.com/" target="_new" rel="nofollow">Bootstrap CDN</a>
                    </h5>
                    
                    <h5>
                    <a href="https://themestr.app" target="_new" rel="nofollow" title="Bootstrap Theme builder">Themestr.app</a>
                    </h5>
                    
                    <h5>
                    <a href="http://bootstrap.build" target="_new" rel="nofollow">Bootstrap.build</a>
                    </h5>
                    
                    <h5>
                    <a href="http://bootstrap4.guide" target="_new" rel="nofollow">Bootstrap 4 Guide</a>
                    </h5>
                    
                    <h5>
                    <a href="https://hackerthemes.com/bootstrap-cheatsheet/" target="_new" rel="nofollow">Bootstrap 4 Cheatsheet</a>
                    </h5>
                    
                    <h5>
                    <a href="https://medium.com/wdstack/bootstrap-4/home" target="_new" rel="nofollow">Bootstrap 4 on WDStack</a>
                    </h5>
                    
                    <h5>
                    <a href="https://medium.com/wdstack/top-10-bootstrap-4-answers-50d8d73d95df" target="_new" rel="nofollow">Top 10 Bootstrap 4 Answers</a>
                    </h5>
                    
                    <p class="lead mt-5">
                    There are many other Bootstrap resources out there, but the ones I’ve listed above are the most useful, maintained and up-to-date. 
                    Beware: Many Bootstrap 4 tutorials and articles, like those on ⛔W3schools, are full of misinformation and poor guidance..
                    </p>
                    
                    <h2>Thanks for Reading!</h2>
                    
                </div>
                <div class="col-sm-10 mx-auto mt-5 py-4 border-top">
                    <div class="row">
                        <div class="col-sm mr-auto">
                            <a href="how-to-create-bootstrap-themes.html">Prev: How to Create Bootstrap Themes</a>
                        </div>
                        <div class="col-sm-auto text-right">
                            <a href="how-to.html">Home: How-to... Bootstrap</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block">
                    <h3 class="text-center">How can we help you?</h3>
                </div>
                <div class="modal-body">
                    <form id="contactForm" role="form" method="post">
                        <div class="form-group">
                            <label for="inputEmail" class="col-md-2 form-control-label">Email</label>
                            <div class="col-md-12">
                                <input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage" class="col-md-2 form-control-label">Message</label>
                            <div class="col-md-12">
                                <textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xl-12">
                                <button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block text-center">
                    <h3>Thank you!</h3>
                    <h6>We'll be in touch</h6>
                </div>
            </div>
        </div>
    </div>
        <footer id="footer" class="bg-dark text-white">
        <div class="container pt-3">
            <div class="row">
                <div class="col-6 col-md-6 col-lg-3 column">
                    <h6>Information</h6>
                    <ul class="list-unstyled">
                        <li><a href="http://themes.guide/#freebies">Free Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#themes">Pro Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#about">Benefits</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column text-lg-left text-right">
                    <h6>Tools</h6>
                    <ul class="list-unstyled">
                        <li><a href="https://themestr.app" title="Custom Bootstrap theme creator - SASS to CSS">Themestr.app</a>
                        </li>
                        <li><a href="http://bootstrap4.guide" title="Learn about Bootstrap 4">Bootstrap4.guide</a>
                        </li>
                        <li><a href="http://www.codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column">
                    <h6></h6>
                </div>
                <div class="col-6 col-lg-3 column text-right">
                    <h6>Follow</h6>
                    <ul class="nav float-right">
                        <li><a class="nav-link px-1" href="//twitter.com/ThemesGuide" title="@ThemesGuide"><i class="fa fa-3x ion-logo-twitter"></i></a></li>
                        <li><a class="nav-link px-1" href="https://github.com/ThemesGuide/bootstrap-themes" title="Star on GitHub"><i class="fa fa-3x ion-ios-star-outline"></i></a></li>
                        <li><a class="nav-link pl-1 pr-0" href="https://github.com/ThemesGuide" title="Follow on GitHub"><i class="fa fa-3x ion-logo-github"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container pt-5">
            <p class="small text-right">Made with ♥ by <a class="text-white" href="http://themes.guide">Themes.guide</a> ©2018</p>
        </div>
    </footer>
    <!--scripts loaded here-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  </body>
</html>